<template>
  <section>
    <drag-div>
      <div slot="left" class="m">
        <cm-scroll>
          <el-input
            placeholder="请输入关键词进行过滤"
            v-model="filterText"
            clearable
          ></el-input>
          <el-tree
            class="filter-tree"
            :data="categoryTypes"
            :props="categoryProps"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            :default-expanded-keys="[defaultExpandKeys]"
            :highlight-current="showTree"
            :style="maxHeight"
            @node-click="handleNodeClick"
            :expand-on-click-node="false"
          >
          </el-tree>
        </cm-scroll>
      </div>
      <div slot="right" style="padding:10px">
        <el-row>
          <box-border class="p10">
            <el-col :span="24">
              <div>
                <el-row :gutter="4">
                  <el-form :inline="true">
                    <el-form-item>
                      <el-input
                        placeholder="请输入关键词"
                        v-model="searchDto.keywords"
                      ></el-input>
                    </el-form-item>
                    <el-form-item class="clear_item-margin-bottom">
                      <el-button
                        type="primary"
                        icon="el-icon-search"
                        @click="getPageData()"
                        >查询
                      </el-button>
                      <el-button
                        type="primary"
                        icon="el-icon-s-open"
                        @click="clear()"
                        >重置
                      </el-button>
                      <el-button
                        type="primary"
                        icon="el-icon-circle-plus"
                        @click="newCategory()"
                        >新增分类
                      </el-button>
                    </el-form-item>
                  </el-form>
                </el-row>
              </div>
              <div class="table_content">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="全部" name="all"></el-tab-pane>
                </el-tabs>
                <page-table
                  ref="multipleSelection"
                  :page-data="pageData"
                  :loading="loading"
                  :do-get-page-data="getPageData"
                >
                  <el-table-column
                    prop="name"
                    label="分类名称"
                    align="center"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column prop="type" label="类型" align="center">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.type | keyText("CATEGORY_TYPE")
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="sort" label="排序" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    label="创建日期"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.createTime | dataTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="管理"
                    width="150"
                    align="center"
                    fixed="right"
                  >
                    <template slot-scope="scope">
                      <el-tooltip content="编辑" placement="top"
                        ><el-button
                          type="button"
                          size="mini"
                          icon="el-icon-edit"
                          @click="editCategory(scope.row)"
                        >
                        </el-button
                      ></el-tooltip>
                      <el-tooltip content="删除" placement="top">
                        <el-button
                          size="mini"
                          icon="el-icon-delete"
                          @click="delCategory(scope.row)"
                        >
                        </el-button
                      ></el-tooltip>
                    </template>
                  </el-table-column>
                </page-table>

                <el-dialog
                  :visible.sync="showEditCategory"
                  title="新增 / 编辑 选项"
                  width="40%"
                  @close="fail"
                >
                  <el-form
                    ref="form"
                    :model="formData"
                    :rules="rules"
                    :gutter="10"
                    label-width="100px"
                  >
                    <el-form-item label="分类名称:" prop="name">
                      <el-input
                        placeholder="请输入分类名称"
                        v-model="formData.name"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="类型:" prop="type">
                      <el-select
                        v-model="formData.type"
                        placeholder="请选择"
                        @change="typeChange"
                      >
                        <el-option
                          v-for="item in categoryTypes1"
                          :key="item.keyword"
                          :label="item.label"
                          :value="item.keyword"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="上级:" prop="parentId">
                      <el-cascader
                        :options="categoryList"
                        v-model="formData.parentId"
                        :props="categoryProps1"
                        clearable
                      ></el-cascader>
                    </el-form-item>
                    <el-form-item label="排序:" prop="value">
                      <el-input-number
                        v-model="formData.sort"
                        :min="0"
                        label="描述文字"
                      ></el-input-number>
                    </el-form-item>
                  </el-form>
                  <div slot="footer">
                    <el-button type="primary" @click="saveNewCategory"
                      >保存
                    </el-button>
                    <el-button @click="showEditCategory = false"
                      >取消
                    </el-button>
                  </div>
                </el-dialog>
              </div>
            </el-col>
          </box-border>
        </el-row>
      </div>
    </drag-div>
  </section></template
>
<script>
import { mapGetters } from "vuex";
import _ from "lodash";

export default {
  name: "category",
  created() {
    this.getPageData();
    console.log("categoryTypes", this.categoryTypes);
  },
  data() {
    return {
      activeName: "all",
      categoryList: [],
      formData: {
        parentId: 0,
        name: "",
        sort: "",
        type: ""
      },
      rules: {
        name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }]
      },
      showEditCategory: false,
      loading: false,
      pageData: {},
      filterText: "",
      searchDto: {
        type: "",
        keywords: "",
        pageSize: 10,
        pageIndex: ""
      },
      categoryProps: {
        label: "label",
        value: "id"
      },
      categoryProps1: {
        checkStrictly: true,
        label: "name",
        value: "id"
      },
      defaultExpandKeys: "",
      showTree: false,
      categoryTypes1: this.getDictionary("CATEGORY_TYPE"),
      categoryTypes: [
        { label: "全部", id: "", children: this.getDictionary("CATEGORY_TYPE") }
      ]
    };
  },
  computed: {
    ...mapGetters({}),
    maxHeight() {
      return { height: this.clientHeight - 220 + "px" };
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    handleClick(tab, event) {
      let status = "all";
      switch (tab.paneName) {
        case "all":
          status = "all";
          break;
      }
    },
    //数据分类添加
    newCategory() {
      this.showEditCategory = true;
    },
    //保存新增/修改数据分类
    saveNewCategory() {
      if (this.formData.parentId && this.formData.parentId.length > 0) {
        this.formData.parentId = this.formData.parentId[0];
      } else {
        this.formData.parentId = "";
      }
      let tem = {
        body: this.formData
      };
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.API.addOrUpdateCategory(tem).then(res => {
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.getPageData();
            this.showEditCategory = false;
          });
        } else {
          return false;
        }
      });
    },
    getCategoryTree(type) {
      this.API.getCategoryTree({ type: type }).then(res => {
        this.categoryList = res.data;
      });
    },
    typeChange(val) {
      this.getCategoryTree(val);
    },
    //编辑数据分类
    editCategory(row) {
      this.formData = _.clone(row);
      this.getCategoryTree(this.formData.type);
      this.formData.parentId = [this.formData.parentId];
      this.showEditCategory = true;
    },
    // 数据分类删除
    delCategory(row) {
      this.$confirm("确认删除当前分类?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteCategoryById(tem).then(res => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getPageData();
          });
        })
        .catch(() => {});
    },
    //  数据分类列表
    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getCategoryPageList(tem).then(res => {
        this.pageData = res.data;
        console.log("456", this.pageData);
      });
    },
    // 过滤分类
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 左侧分类树的单击事件
    handleNodeClick(val) {
      console.log(val);
      this.searchDto = {
        type: "",
        keywords: "",
        pageSize: 10,
        pageIndex: ""
      };
      this.searchDto.type = val.keyword;
      this.getPageData();
    },
    clear() {
      this.searchDto = {
        type: "",
        keywords: "",
        pageSize: 10
      };
      this.getPageData();
    },
    fail() {
      this.formData = { parentId: 0, name: "", sort: "", type: "" };
    }
  }
};
</script>
<style scoped lang="less"></style>
